<style media="screen">
.head-container{
  position: relative;
  padding: 10px 0 14px;
  border-bottom: 1px solid #E3E3E5;
}
.head-container .mes{
  margin-right: 10px;
  float: left;
}
.head-container .mes p{
  font-size: 12px;
  color:#CFCFCF;
  margin-bottom: 6px;
}
.head-container .mes input{
  width: 160px;
  height: 34px;
}
.head-container .flow{
  float: left;
  margin-right: 10px;
}
.head-container .flow p{
  font-size: 12px;
  color:#CFCFCF;
  margin-bottom: 6px;
}
.head-container .flow .flow-select{
  width: 140px;
  height: 34px;
}
.head-container .button-group{
  padding-top: 23px;
}
.calendar_container{
  width: 140px;
}
</style>

<section id="unitYuce" class="pl-24 pr-24">
  <hl-page-header title="租金预测"></hl-page-header>
  <div class="head-container clearfix">
    <div class="clearfix">
      <div class="mes">
        <p>项目</p>
        <div id="dj-type" class="select-ul" style="width:120px;">
          <span class="select-name info project-name">请选择</span>
          <ul >
            <li v-for="item in projectData" @click="getBuilding(item.projectId,item.projectName)">{{item.projectName}}</li>
          </ul>
        </div>
      </div>
      <div class="flow">
        <p>楼宇</p>
        <div class="select-ul" style="width:120px;">
          <span class="select-name info building-name">请选择</span>
          <ul >
            <li v-for="item in buildingData" @click="getFloor(item.buildingId,item.name)">{{item.name}}</li>
          </ul>
        </div>
      </div>
      <div class="flow">
        <p>楼层</p>
        <div class="select-ul" style="width:120px;">
          <span class="select-name info floor-name">请选择</span>
          <ul >
            <li v-for="item in floorData" @click="getfloorId(item.floorId)">{{item.floorName}}</li>
          </ul>
        </div>
      </div>
      <div class="flow">
        <p>业态</p>
        <div class="select-ul" style="width:120px;">
          <span class="select-name info yetai-name">请选择</span>
          <ul >
            <li v-for="item in unitType" @click="getType(item.code)">{{item.memo}}</li>
          </ul>
        </div>
      </div>

      <div class="button-group">
        <hl-button @on-click="searchUnit" size="mini">查询</hl-button>
        <hl-button @on-click="resetData" size="mini">重置</hl-button>
      </div>
    </div>
  </div>
  <!-- 颜色区分 -->
  <div class="clearfix pb-10 pt-10">
    <div class="pull-right color-gray"><span class="color-2 inline mr-5" style="width:10px;height:10px;border-radius: 2px;"></span>空置</div>
    <div class="pull-right color-gray mr-24"><span class="color-1 inline mr-5" style="width:10px;height:10px;border-radius: 2px;"></span>预测</div>
    <div class="pull-right color-gray mr-24"><span class="color-0 inline mr-5" style="width:10px;height:10px;border-radius: 2px;"></span>已出租</div>
  </div>
  <div class="box-i-shadow-1 br-4" v-if="exclParams.flag">
    <div class="unit-yuce clearfix">
      <div class="pull-left dy-flex unit-left-list text-center color-gray">
        <div class="dy-fx-1">楼层</div>
        <div class="dy-fx-1">单元</div>
        <div class="dy-fx-1">面积</div>
        <div class="dy-fx-1">业态</div>
      </div>
      <div class="pull-left unit-right-list color-gray">
        <div class="unit-year-top clearfix border-b">
          <div class="pull-left text-center" :class="{'border-r': index == setYearNumber.length-1 ? false : true}" v-for="(item, index) in setYearNumber" :style="setYearWd[index]">{{item}}</div>
        </div>
        <div class="unit-month-bottom">
          <div :style="setMonthWd" class="pull-left text-center" v-for="(item, index) in setMonthNumber">{{item}}</div>
        </div>
      </div>
    </div>
    <div
      class="unit-yuce clearfix border-t"
      style="height:auto;"
      v-for="(item, index) in listData"
      :data-projectId="saveId.projectId"
      :data-projectName="names.projectName"
      :data-buildingId="saveId.buildingId"
      :data-buildingName="names.buildingName"
      :data-floorId="item.floorId"
      :data-floorName="item.floorName"
      :data-unitId="item.unitId"
      :data-unitName="item.unitName">
      <div class="pull-left unit-left-list text-center">
        <div class="dy-flex" style="lineHeight:40px;" >
          <div class="dy-fx-1">{{item.floor}}</div>
          <div class="dy-fx-1">{{item.unitName}}</div>
          <div class="dy-fx-1">{{item.unitAcreage}}</div>
          <div class="dy-fx-1">{{item.typeName}}</div>
        </div>
      </div>
      <div class="pull-left unit-right-list" style="lineHeight:40px;color:#fff;">
        <div
          class="pull-left text-center relative hover-show br-4"
          :class="{'color-0': item1.typeNumber == '0', 'color-1': item1.typeNumber == '1', 'color-2': item1.typeNumber == '2'}"
          :style="{height: '40px', width:item1.proportion}"
          v-for="(item1, index1) in item.list">
          <span
            v-if="item1.typeNumber == '0' && item1.rentWay == 'M' && item1.showNumber > 22"
            class="ellipsis-1 pos-center">{{item1.rentIncreasePrice | to2}}元/平米/月</span>
          <span
            v-if="item1.typeNumber == '0' && item1.rentWay == 'D' && item1.showNumber > 22"
            class="ellipsis-1 pos-center">{{item1.rentIncreasePrice | to2}}元/平米/天</span>
          <span class="ellipsis-1 pos-center" v-if="item1.typeNumber == '1' && item1.showNumber > 22 && item1.rentPriceType == 'M'">{{item1.rentPrice | to2}}元/平米/月({{item1.rentPossiblePercent | to2}}%)</span>
          <span class="ellipsis-1 pos-center" v-if="item1.typeNumber == '1' && item1.showNumber > 22 && item1.rentPriceType == 'D'">{{item1.rentPrice | to2}}元/平米/天({{item1.rentPossiblePercent | to2}}%)</span>
          <!-- 操作按钮 -->
          <span class="icon-predict-more absolute cursor btn-orgn" @click="orgeGetInfo($event, item1, index1, item.list.length, index)" v-if="item1.showNumber > 5" v-show="item1.typeNumber == '0'"></span>
          <span class="icon-predict-more absolute cursor btn-orgn" @click="orgeGetInfo($event, item1, index1, item.list.length, index)" v-if="item1.showNumber > 5" v-show="(quanxianSet.indexOf('c129') > -1) && item1.typeNumber != '0'"></span>
          <!-- hover -->
          <span class="hover-money" v-if="item1.typeNumber == '0' && item1.rentWay == 'M'">{{item1.rentIncreasePrice | to2}}元/平米/月</span>
          <span class="hover-money" v-if="item1.typeNumber == '0' && item1.rentWay == 'D'">{{item1.rentIncreasePrice | to2}}元/平米/天</span>
          <span class="hover-money" v-if="item1.typeNumber == '1' && item1.rentPriceType == 'M'">{{item1.rentPrice | to2}}元/平米/月 ({{item1.rentPossiblePercent | to2}}%)</span>
          <span class="hover-money" v-if="item1.typeNumber == '1' && item1.rentPriceType == 'D'">{{item1.rentPrice | to2}}元/平米/天 ({{item1.rentPossiblePercent | to2}}%)</span>
        </div>
      </div>
    </div>
  </div>
  <div class="position-top" v-if="showPositon" :style="position">
    <div v-if="typeNumber == '0'">
      <div @click="seeDetails">查看详情</div>
    </div>
    <div v-if="typeNumber == '1'" >
      <div @click="editYuce">编辑</div>
      <div @click="delYuce">删除</div>
    </div>
    <div v-if="typeNumber == '2'">
      <div @click="showYuceAdd">新增</div>
    </div>
  </div>
  <!-- //新增 -->
  <div class="mark-yuce" v-if="addYuceFlag">
  <!-- <div class="mark-yuce" v-if="true"> -->
    <div class="yuce-contains">
      <div class="title">
        <span v-if="tempJson.typeNumber == '2'">新增预测</span>
        <span v-if="tempJson.typeNumber == '1'">编辑预测</span>
      </div>
      <div class="close" @click="hideYuceAdd">x</div>
      <div class="yuce-orge">
        <div class="dy-flex line-height-34 pt-15">
          <div class="dy-fx-1">预测时间段</div>
          <div class="dy-fx-4 dy-flex" style="align-items: center">
            <div class="calendar_container">
              <web-calendar type="primary" v-model="beginDateYc" :afterdate="endDateYc" @change="getClickName('beginDateYc')" tips="起始日期"></web-calendar>
            </div>
            <span style="margin:0 10px">-</span>
            <div class="calendar_container">
              <web-calendar type="primary" v-model="endDateYc" :beforedate="beginDateYc" @click="getClickName('endDateYc')" tips="截止日期"></web-calendar>
            </div>
          </div>

          
          
        </div>
        <div class="dy-flex line-height-34 pt-15">
          <div class="dy-fx-1">预测租金</div>
          <div class="dy-fx-4 relative">
            <input type="text" class="form-control text-left inline" style="width: 305px;" v-model="ycRent">
            <div class="select-ul mr-10 select-yuce">
              <span class="select-name border-l" style="border-right:0;border-top:0;border-bottom:0;lineHeight:30px;height:30px; marginTop:2px;">元/m²/天</span>
              <ul >
                <li v-for="item in timeType" @click="timeTypeAct = item.code">{{item.name}}</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="dy-flex line-height-34 pt-15">
          <div class="dy-fx-1">出租可能</div>
          <div class="dy-fx-4">
            <input type="text" class="empty-h form-control bg-fff inline" v-model="ycPrent"> %
          </div>
        </div>
      </div>
      <div class="orge-footer text-center">
        <button type="button" class="btn n-btn-primary mr-10" style="wid th:90px;minWidth:80px;" v-if="tempJson.typeNumber == '2'" @click="addYuce">确定</button>
        <button type="button" class="btn n-btn-primary mr-10" style="width:90px;minWidth:80px;" v-if="tempJson.typeNumber == '1'" @click="putYuce">确定</button>
        <button type="button" class="btn n-btn-outline" @click="hideYuceAdd">取消</button>
      </div>
    </div>
  </div>
  <div class="footer-template border-t pt-10" v-if="exclParams.flag" v-show="quanxianSet.indexOf('c129') > -1" style="width:957px;">
    <form id="excel-form">
      <button type="button" class="btn n-btn-primary mr-10" style="width:120px;minWidth:80px;" @click="showExcl">导入预期</button>
      <button type="button" class="btn n-btn-outline" @click="extExcl">导出预期/模板</button>
      <input type="file" id="excel-file" class="hidden" />
    </form>
  </div>
  <!-- //表格导入预测 -->
  <div class="mark-yuce" v-if="exclFlag">
    <div class="yuce-contains" style="width:480px;">
      <div class="title">导入预测</div>
      <div class="close" @click="hideExcl">x</div>
      <div class="yuce-orge">
        <div class="dy-flex line-height-34 pt-15">
          <div class="dy-fx-1"></div>
          <div class="dy-fx-4">
            <input type="text" class="empty-h form-control bg-fff inline" readonly style="vertical-align: middle;width:170px;" id="exclName">
            <button class="btn s-btn-default" style="vertical-align: middle;" @click="updateExcl">上传</button>
          </div>
        </div>
        <div v-if="exclFlagShow" class="text-center dy-flex center-dy">
          <div v-if="exclParams.postFlag == '0'" class="pt-15">
            <div class="typing_loader"></div>
            数据校验中
          </div>
          <div v-if="exclParams.postFlag == '1'" class="pt-15">
            <div class="icon-Gm-delete-2 pb-10" style="font-size: 24px; color:#fe6e63;"></div>
            数据验证失败！
            <p>请修改表格数据后再操作！</p>
          </div>
          <div v-if="exclParams.postFlag == '2'" class="pt-15">
            <div class="icon-Nav-dispose-complete pb-10" style="font-size: 24px; color:#73c676;"></div>
            数据验证通过！
          </div>
        </div>
      </div>
      <div class="orge-footer text-center">
        <button type="button" class="btn n-btn-primary mr-10" style="width:90px;minWidth:80px;" @click="submitExcl">确定</button>
        <button type="button" class="btn n-btn-outline" @click="hideExcl">取消</button>
      </div>
    </div>
  </div>
</section>

<style media="screen">
.unit-yuce {
  height: 65px;
}
.unit-left-list {
  width: 215px;
  border-right: 1px solid #ddd;
}
.unit-left-list>div {
  line-height: 65px;
}
.unit-right-list {
  width: 741px;
}
.color-0 {
  background-color: #44b549;
}
.color-1 {
  background-color: #f9b96b;
}
.color-2 {
  background-color: #bfc0c1;
}
.hover-money {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translate(-50%, 0);
  background-color: #fff;
  color: #666;
  width: auto;
  padding: 0 10px;
  white-space:nowrap;
  box-shadow: 0 0 8px rgba(0,0,0,.25);
  z-index: 999;
  border-radius: 4px;
  display: none;
}
.hover-money::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #fff;
  position: absolute;
  left: 50%;
  top: -8px;
  transform: translate(-50%, 0);
}
.hover-show:hover .hover-money {
  display: block;
}
.position-top {
  padding: 0 15px;
  position: absolute;
  background-color: #fff;
  box-shadow: 0 0 8px rgba(0,0,0,.25);
  line-height: 32px;
  border-radius: 4px;
  white-space:nowrap;
  z-index: -1;
  color: #5e67a5;
}
.position-top div {
  cursor: pointer;
}
.position-top::before {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translate(0, -50%);
  border-top: 5px solid transparent;
  border-right: 10px solid #fff;
  border-bottom: 5px solid transparent;
}
.mark-yuce {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.yuce-contains {
  width: 615px;
  background-color: #fff;
  border-radius: 4px;
  position: relative;
}
.yuce-contains .title{
  line-height: 45px;
  text-align: center;
  height: 45px;
}
.yuce-contains .close {
  position: absolute;
  right: 0;
  top: 0;
  width: 45px;
  height: 45px;
  text-align: center;
  line-height: 45px;
}
.yuce-orge {
  padding-left: 24px;
  padding-right: 24px;
  background-color: #f2f2f2;
  padding-bottom: 15px;
}
.orge-footer {
  padding: 8px 0;
}
.select-yuce {
  position: absolute;
  right: 141px;
  top: 0;
  width: 120px;
}
.footer-template {
  position: fixed;
  bottom: 10px;
}
.center-dy {
  justify-content: center;
  align-items: center;
}
.pos-center {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  text-align: center;
}
.btn-orgn {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 5px;
  max-width: 40px;
  float: right;
  line-height: 40px;
  box-sizing: border-box;
  text-align: right;
  padding-right: 10px;
  display: block;
}

/*Typing Loader*/
.typing_loader{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    -webkit-animation: typing 1s linear infinite alternate;
       -moz-animation: Typing 1s linear infinite alternate;
        -ms-animation: Typing 1s linear infinite alternate;
            animation: typing 1s linear infinite alternate;
    margin: 8px auto;
    position: relative;
    left: -12px;
}
@-webkit-keyframes typing{
    0%{
        background-color: rgba(0,0,0, 1);
        box-shadow: 12px 0px 0px 0px rgba(0,0,0,0.2),
                    24px 0px 0px 0px rgba(0,0,0,0.2);
      }
    25%{
        background-color: rgba(0,0,0, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(0,0,0,2),
                    24px 0px 0px 0px rgba(0,0,0,0.2);
    }
    75%{ background-color: rgba(0,0,0, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(0,0,0,0.2),
                    24px 0px 0px 0px rgba(0,0,0,1);
      }
}

@-moz-keyframes typing{
   0%{
        background-color: rgba(0,0,0, 1);
        box-shadow: 12px 0px 0px 0px rgba(0,0,0,0.2),
                    24px 0px 0px 0px rgba(0,0,0,0.2);
      }
    25%{
        background-color: rgba(0,0,0, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(0,0,0,2),
                    24px 0px 0px 0px rgba(0,0,0,0.2);
    }
    75%{ background-color: rgba(0,0,0, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(0,0,0,0.2),
                    24px 0px 0px 0px rgba(0,0,0,1);
      }
}

@keyframes typing{
   0%{
        background-color: rgba(0,0,0, 1);
        box-shadow: 12px 0px 0px 0px rgba(0,0,0,0.2),
                    24px 0px 0px 0px rgba(0,0,0,0.2);
      }
    25%{
        background-color: rgba(0,0,0, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(0,0,0,2),
                    24px 0px 0px 0px rgba(0,0,0,0.2);
    }
    75%{ background-color: rgba(0,0,0, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(0,0,0,0.2),
                    24px 0px 0px 0px rgba(0,0,0,1);
      }
}
</style>

<script src="modules/price/scripts/unitYuce.js" charset="utf-8"></script>
